<!-- 分账列表页 -->
<template>
  <view v-if="shenheStatus == 0" class="page">
    <view class="list">
      <view
        class="item"
        v-for="item of list"
        :key="item.id"
        @click="
          $utils.toUrl(`/showGoodsForm/form/index?disabled=true&id=${item.id}`)
        "
      >
        <view class="time"
          >{{ $u.timeFormat(item.created_at, "yyyy-mm-dd hh:MM") }}
          <i class="iconfont icon-arrow-right"></i>
        </view>
        <view class="item-hd">
          <view class="img">
            <image :src="item.cover_pic" mode="aspectFill"></image>
          </view>
          <view class="con">
            <view class="title">{{ item.goods_name }}</view>

            <view class="price"> ¥{{ item.price }} </view>
          </view>
        </view>
      </view>
    </view>
    <toolsMore :status="moreStatus"></toolsMore>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
import toolsMore from "@/components/tools/tools-more.vue";
export default {
  components: {
    Shenhe,
    toolsMore
  },

  data() {
    return {
      list: [],
      moreStatus: 1,
      page: 1,
      isEnd: false
    };
  },

  onLoad() {
    this.clearData();
  },

  methods: {
    clearData() {
      this.page = 1;
      this.isEnd = false;
      this.list = [];

      this.getList();
    },

    async getList() {
      let { list: oldList, page } = this;
      this.moreStatus = 2;

      try {
        const res = await this.$allrequest.goods.formDataList({
          page,
          limit: 10
        });
        uni.stopPullDownRefresh();
        this.moreStatus = 1;

        if (!res.code) {
          let { list, totalCount } = res.data,
            count = parseInt(totalCount);
          if (list.length) {
            oldList.push(...list);
            this.page = page + 1;
          }
          if (oldList.length >= count) {
            this.isEnd = true;
            this.moreStatus = 3;
          }
        }
      } catch (error) {
        this.moreStatus = 1;
        uni.stopPullDownRefresh();
      }
    }
  },

  onReachBottom() {
    if (this.isEnd) {
      return;
    }

    this.getList();
  },

  onPullDownRefresh() {
    this.clearData();
  }
};
</script>

<style lang="scss">
.page {
  min-height: 100vh;
  background: #f2f2f2;
  overflow: hidden;
}

.list {
  padding: 24rpx;

  .item {
    margin-bottom: 24rpx;
    padding: 0 24rpx;
    font-size: 24rpx;
    color: #8c8c8c;
    background: #fff;
    border-radius: 24rpx;
  }

  .time {
    display: flex;
    align-items: center;
    padding: 30rpx 0;
    font-size: 30rpx;
    color: #262626;

    .iconfont {
      font-size: 24rpx;
    }
  }

  .item-hd {
    display: flex;
    padding-bottom: 40rpx;
  }

  .img {
    width: 160rpx;
    height: 160rpx;
    overflow: hidden;
    image {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 16rpx;
    }
  }

  .con {
    flex: 1;
    overflow: hidden;
    margin: 0 0 0 20rpx;
    min-height: 160rpx;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
  }

  .title {
    font-size: 28rpx;
    color: #262626;
    font-weight: bold;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: bold;
  }

  .price {
    font-size: 32rpx;
    color: #262626;
    font-weight: bold;
  }
}
</style>
